<template>
  <div class="container">
      <levelbar></levelbar>
      <div class="content">
          <div class="top-title">添加官方动态</div>
        <span class="title">内容与图片</span>
        <el-form :model="form" ref="form" label-width="82px" class="form" :rules="rules">
            <div style="overflow:hiddden">
                <el-row :gutter="41">
                    <div class="describe"><font color='red'>* </font>客户端<i></i></div>
                    <el-col :span="10">
                        <el-form-item label-width="0" prop="client">
                            <el-select v-model="form.client" style="width:100%" >
                                <el-option v-for="item in form.clientList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="41">
                    <div class="describe"><font color='red'>* </font>内容<i></i></div>
                    <el-col :span="10">
                        <el-form-item label-width="0" prop="content">
                            <el-input :maxlength="500" type="textarea" :rows="8" v-model="form.content" placeholder="写下你要分享的新鲜事"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <el-row :gutter="41">
                <div class="describe">图片<i>(图片大小750 * 1334, 支持 JPG JPEG PNG GIF 格式，500K以内的图片)</i></div>
                <el-col :span="10">
                <el-form-item label-width="0" prop="updatePic">
                    <div class="form-content" :class="{'upload-image-max': imgOptions.fileListMaxLen }">
                        <el-row :gutter="41">
                            <el-col :span="24" class="upload-image">
                                    <div class="img-box">
                                        <el-form-item label="">
                                            <fileUpload 
                                            :imgSize="0.48828125"
                                            @remove="fileImgRemove" 
                                            :isMultiple="imgOptions.isMultiple"
                                            :file-list.sync="imgOptions.fileList" 
                                            :file-list-show.sync="imgOptions.fileListShow" 
                                            :list-type="imgOptions.listType"
                                            :up-file-type="imgOptions.upFileType"
                                            :accept-list="imgOptions.accept"
                                            @onSuccess="onSuccess"
                                            @fileMaxLen="fileMaxLen"
                                            @fileChange="fileChange"
                                            >
                                            <i class="el-icon-plus avatar-uploader-icon"></i>
                                        </fileUpload>
                                        </el-form-item>
                                    </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-form-item>
                </el-col>
            </el-row>


            <span class="title">链接或自定义</span>
            <el-row :gutter="41">
                <el-col :span="21">
                <el-row :gutter="41">
                    <div class="describe">链接名称<i></i></div>
                    <el-form-item label-width="20px" prop="linkName">
                        <el-input :maxlength="12" v-model="form.linkName" placeholder="请输入链接名称" style="width:46%"></el-input>
                    </el-form-item>
                </el-row>
                <el-radio class="radio" v-model="form.showType" label="0">链接</el-radio>
                <el-radio class="radio" v-model="form.showType" label="1">自定义</el-radio>
                <div class="box" v-if="form.showType === '0'">
                    
                    <el-row :gutter="41">
                        <el-form-item label-width="20px" prop="link">
                            <el-popover placement="top-start" trigger="focus" content="请输入http://或https://前缀链接">
                                <el-input slot="reference" :maxlength="300" v-model="form.link" placeholder="请输入链接" style="width:46%"></el-input>
                            </el-popover>
                        </el-form-item>
                    </el-row>
                </div>
                <div v-else class="box">
                    <el-form-item label-width="0">
                        <Tinymce :id="tinymceId" :height="260" ref="form.content" v-model="form.htmlContent"></Tinymce>
                    </el-form-item>
                </div>
                </el-col>
            </el-row>

            <div class="form-item">
                <el-row>
                    <el-col :span="24">
                        <div class="footer">
                            <el-button @click="resetForm()">返回</el-button>
                            <el-button type="primary" @click="submitForm('form')" :loading="loadingBtn">确认</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-form>
      </div>
  </div>
</template>
<script>
import Levelbar from '../layout/Levelbar';
import Tinymce from 'components/Tinymce';
import imgUpload from 'components/Upload/sigleIUpload';
import { insertDynamic } from 'api/dynamics';
import fileUpload from 'components/Upload/fileUpload';
export default {
    name: 'parcelMangement',
    components: { Levelbar, imgUpload, Tinymce, fileUpload},
    data() {
        var validContent = (rule, value, callback) => {
            if (!value.replace(/\s+/g, '')) {
                callback(new Error('请勿纯空格输入'))
            } else {
                callback();
            }
        };
        return {
            form: {
                clientList: [ 
                    {
                        id: '',
                        name: '请选择'
                    },
                    {
                        id: '0',
                        name: '家庭端'
                    },
                    {
                        id: '1',
                        name: '教学端'
                    },
                    {
                        id: '2',
                        name: '家庭和教学端'
                    }
                ],
                client: '', // 客户端
                showType: '0', // 链接类型
                link: '', // 链接
                linkName: '', // 链接名称
                content: '', // 内容
                htmlContent: '', // 自定义
                pictureUrl: '' // 图片链接
            },
            // 图片上传控件
            imgOptions: {
                upFileType: 'image',
                fileListShow: true,
                fileList: [],
                isMultiple: true,
                imageInfor: [],
                fileListMaxLen: false // 是否达最大上传量(控制添加按钮显示)
            },
            loadingBtn: false,
            getDetailArrPic: [], // 上传图片数组
            tinymceId: 'tinymceId',
            rules: {
                client: [
                    { required: true, message: '请选择客户端', trigger: 'change' }
                ],
                content: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                    { validator: validContent, trigger: 'blur'}
                ],
                link: [
                    {
                        pattern: /^(https?):\/\/\w*\.\w*/,
                        message: "请填写完整的链接，链接需以'http://'或者'https://'开头"
                    }
                ]
            }
        };
    },
    methods: {
        fileMaxLen(istrue) {
            this.imgOptions.fileListMaxLen=istrue;
        },
        fileChange(fileListLen) {
            if (fileListLen<9) {
                this.imgOptions.fileListMaxLen=false;
            }
        },
        // 移除图片
        fileImgRemove(file, fileList) {
            this.imgOptions.fileListShow=true;
            this.getDetailArrPic = fileList.map(item => {
                return item.response.content.accessUrl
            });
            this.form.pictureUrl =this.getDetailArrPic.join(';');
            if (this.getDetailArrPic.length<9) {
                this.imgOptions.fileListMaxLen=false;
            }
        },
        // 上传成功
        onSuccess(data) {
            
            this.imgOptions.fileListShow=true;
            this.getDetailArrPic.push(data.accessUrl);// 发给后台的src 数组
            this.form.pictureUrl =this.getDetailArrPic.join(';');
            if (this.getDetailArrPic.length >= 9) {
                this.imgOptions.fileListMaxLen=true;
            }
        }, 
        // 返回
        resetForm() {
            this.$router.push('dynamics');
        },
        // 提交
        submitForm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要提交吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.loadingBtn=true;
                        insertDynamic(
                        this.form.client,
                        this.form.content,
                        this.form.pictureUrl,
                        this.form.linkName,
                        this.form.showType,
                        this.form.link,
                        this.form.htmlContent,
                        ).then(response => {
                            this.loadingBtn=false;
                            this.$message({
                                type: 'success',
                                message: response.data.errorMsg
                            })
                            this.$store.dispatch('UpdateCache', true);// 修改 和查看
                            this.$router.push('dynamics');
                        }).catch(() => {
                            this.loadingBtn=false;
                        });
                    }).catch(() => {
                        this.$message.info('已取消');
                    });
                } else {
                    return false;
                }
            });
        }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
    }
};
</script>
<style lang="scss" scoped>
.top-title{
    text-align: center;
    font-size: 18px;
    color: #333;
    height: 72px;
    line-height: 72px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}
.container {
  position: relative;
  padding: 20px 20px 10px;
  overflow: hidden;
  .content {
    position: relative;
    padding: 8px 50px 100px;
    background: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    .title {
      position: relative;
      font-size: 14px;
      color: rgb(106, 85, 72);
      padding-left: 14px;
      margin: 30px 0;
      display: block;
      &::after {
        position: absolute;
        content: "";
        width: 4px;
        height: 14px;
        background: #ff5e2c;
        left: 0;
        top: 4px;
      }
    }
    
  }
  .box{
        margin-top:20px;
    }
    .describe {
        font-size: 14px;
        color: #666;
        margin: 20px 0;
        padding-left:20px;
    }
    .footer{
        text-align: center;
        padding-top:40px;
    }
}
</style>
